<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/echarts.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>蜂窝煤用户信息</title>
    <link href="CSS/style1.css" rel="stylesheet" type="text/css" />
    <!--slider start-->
    <link href="CSS/quake.slider.css" rel="stylesheet" type="text/css" />
	<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.minuserinfo.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/quake.slider-min1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.quake-slider').quake({ thumbnails: false, frameWidth: 600, frameHeight: 609 });
        });
    </script>
    <style>

    </style>
    <script>
    //订单信息
    function getuserorder(){
    var str="<div><table id='orderList' width='600px;' >"+
	        "<tr >"+
	        "<td width='25%' style='color: orangered;font-family: '微软雅黑''>住宿地点</td>"+
	        "<td width='13%' style='color: orangered;font-family: '微软雅黑''>住宿时长</td>"+
	        "<td width='15%' style='color: orangered;font-family: '微软雅黑''>花费</td>"+
	        "<td width='33%' style='color: orangered;font-family: '微软雅黑''>下单时间 </td>"+
	        "<td width='14%' style='color: orangered;font-family: '微软雅黑''>状态</td></tr>";
    $.getJSON("UserServlet",{flag:"queryorderbyuser"},function(data){
    for(var i=0;i<data.length;i++){
    str=str+"<tr>"+
    "<td style='color: black;font-family: 微软雅黑'>"+data[i].order_seller.seller_name+"</td>"+
    "<td style='color: black;font-family: 微软雅黑'>"+data[i].order_days+"天</td>"+
    "<td style='color: black;font-family: 微软雅黑'>"+data[i].order_money+"</td>"+
    "<td style='color: black;font-family: 微软雅黑'>"+data[i].order_time+"</td>"+
    "<td style='color: black;font-family: 微软雅黑'>"+data[i].order_state+"</td><tr>";
    }
    str=str+"</table></div>";
    $("#zzqdsb").html(str);
    });
    
    }
    function getuserorderimg(){
    $.getJSON("UserServlet",{flag:"getmoneypojo",userid:${sessionScope.user.user_id}},function(data){
		var mydiv=document.getElementById("zzqdsb");
		var myecharts=echarts.init(mydiv);
		var myoption={
		title:{text:"上半年消费情况"},
		tooltip:{show:true,trigger:"axis",axisPointer:{type:"cross"}},
		toolbox:[{show:true,feature:{
			saveAsImage:{},
			restore:{},
			magicType:{type:["line","bar"]},
			dataView:{readOnly :false}
		}}],
		legend:[{data:[{name:"上半年消费情况",icon:"circle"}]}],
		xAxis:{type:"category",name:"月份",data:["一月","二月","三月","四月","五月","六月"]},
		yAxis:{name:"金额"},
		series:[{name:"上半年消费情况",
				type:"line",
				 data:[data.Jan,data.Fed,data.Mar,data.Apr,data.May,data.Jun]
		}]
		};
		myecharts.setOption(myoption);
	});
    }
    </script>
    <!--slider end-->
    <style>
    .place{
  position: absolute;
    }
    .daytime{
    position: absolute;
    }
    .spend{
    position: absolute;
    }
    .begintime{
    position: absolute;
    }
    .state{
    position: absolute;
    }
#zzqdsb {
  height: 578px; 
  width:552	px;
  overflow-y:scroll;  /*纵向滚动条始终显示 */
  overflow-x:none;
 } 
 table {
  width: 552px;   /*表格宽度＝div宽度(500px)－滚动条宽度(16px) */
 }
thead tr {
 position: relative;  TOP:0px;  /*绝对定位 */
}
    
    </style>
</head>
<body onload="getuserorder()" style="background: url(image/user/zzqsz.jpg);width: 100%;height: 100%;background-size: 100%;"   >
    <!--wrapper start-->
    <div id="wrapper"  >
    	 <div style="margin-top: -20px;" align="center">
                <p style="font-size: 50px;color: orange;">用户信息</p>
            </div>
        <!--mainbody start-->
        <div id="mainbody">
           
            <!--content start-->
            <div id="content">
                <!--leftsidebar start-->
                <div id="leftsidebar">
                	<!--头像-->
                	<div id=userlogo; style="margin-left: 90px;">
                		<img src="${sessionScope.user.user_logo}" width="170px" height="170px" align="center" style="border-radius: 50%;">
                	</div>
                    <!--名字显示-->
                    <div class="main_tittle" style="margin-top: 10px;">
                       <p style="font-size:20px; " >您好，尊敬的蜂窝煤用户：</p> 
                      </br>
                      <div style="text-align: center;"><label name="username"  style="color: orange; font-size: 17px;"  readonly="readonly"  ><p style="color: orange;font-size: 15px;text-align: center;">${sessionScope.user.user_name}</p></label>
                   </div>
                   </div> 
                    <!--main_tittle start-->
                    <div class="clearfix">
                    </div><span style="color: #DB7093;">
                    <!--电话显示-->
                    <div class="main_desc">
                        <p style="font-size: 20px;">
                                                                       您的电话号码为：<br><br>
                        </p>
                        <div align="center"><p style="color: orange;font-size: 15px;text-align: center;">${sessionScope.user.user_tel}</p></div>
                    </div>
                    <!--main_desc end-->
                    <div class="clearfix">
                    </div>
                    <!--ID显示-->
                    <div class="update">
                    <p style="font-size:20px;" >您的煤块号为：</p>
                    </br>
                    <div align="center" style="font-size: 15px; color: orange;">
                    <p style="color: orange;font-size: 15px;text-align: center;">${sessionScope.user.user_id}</p>
                        </div>
                        </div>
                    <!--update end-->
                    <div class="clearfix">
                    </div>
                    <!--about start-->
                    <div class="about">
                    	            <div style="align-content: center;"><p style="font-size: 20px;" >余额:</p>
                    	 <br>
                       <div align="center" style="font-size: 15px; color: orange;"><p style="color: orange;font-size: 15px;text-align: center;">${sessionScope.user.user_money}</p></div>
                     </br>
                       		                <div class="col-sm-3" >
		                    <a href="addmoney.jsp"  class="btn btn-sm orange" style="text-decoration: none;cursor:pointer;">
		                       <p  style="color: orange;font-size: 15px;">充值</p>
		                    </a>
		                </div>
                    	<div class="col-sm-3" align="right" style="margin-top: -18px; margin-left: 250px;">
		                    <a href="upmoney.jsp" class="btn btn-sm orange" style="text-decoration: none;">
		                        <p style="color: orange;font-size: 15px;">提现</p>
		                    </a>
		                </div>
                    </div>
                    </div>
                    <!--about end-->
                </div>
                <!--leftsidebar end-->
                <!--navigation start-->
                <div id="navigation">
                    <div class="nav">
                        <ul>
                            <li><a href="javascript:;" onclick=getuserorder() style="font-size: 13px;color: orangered;"><span>消费记录</span></a></li>
                            <li>|</li>
                            <li><a href="javascript:;" onclick=getuserorderimg() style="font-size: 13px;color: orangered;"><span>消费报表</span></a></li>
                            <li>|</li>
                            <li><a href="updatepwd.jsp" style="font-size: 13px;color: orangered;"><span>修改密码</span></a></li>
                        </ul>
                    </div>
                </div>
                <!--navigation end-->
                <!--用户订单显示-->
                <div>
               <div id="sidebar" style="position: absolute; margin: 30px;"> 
                        <div id="zzqdsb" style="position:absolute; margin-left: 360px; width:568px; heigh:578px;"></div>
                        	
                        	
                        	
                        	
                        	
                        	
                        	
                        	
                </div>
    </div>
        </div>
            </div>
    <!--wrapper end-->
    <div class="clearfix">
    </div>
    <!--footer start-->
    <div id="footer">
        <p>
            <span><a href="#" style="color: orangered;">Copyright</a><font color="black"> © 2018 FengWoMei.cn </font><a href="index.jsp" target="_blank" title="蜂窝煤之家" style="color: orangered;">蜂窝煤之家</a> <font color="black"> - Collect from </font><a href="http://www.cssmoban.com/" title="网页模板" target="_blank" style="color: orangered;">Internet</a></span>
        </p>
        <p>
            <span><font color="black"> All Rights Reserved.</font></span></p>
        <div class="clearfix">
        </div>
    </div>
    <!--footer end-->
    </div>
</body>
</html>
